import React from 'react'
import styled from 'styled-components'
import { IoIosArrowForward } from 'react-icons/io'
import { AiFillCalendar } from 'react-icons/ai'
import { MdTimelapse } from 'react-icons/md'
import { IoMdCash } from 'react-icons/io'
import { cardStyles } from './ReusableStyles'
export default function FAQ() {
  const faqs = [
    {
      id: 1,
      icon: <AiFillCalendar />,
      text: '如何管理时间并完成更多出行单',
    },
    {
      id: 2,
      icon: <MdTimelapse />,
      text: '如何根据时间及时调整当前订单',
    },
    {
      id: 3,
      icon: <IoMdCash />,
      text: '账户金额安全体现',
    },
  ]

  return (
    <Section>
      <div className='title'>
        <h2>常见问题及建议</h2>
      </div>
      <div className='faqs'>
        {faqs.map((faq) => (
          <div className='faq' key={faq.id}>
            <div className='info'>
              {faq.icon}
              <h4>{faq.text}</h4>
            </div>
            <IoIosArrowForward />
          </div>
        ))}
      </div>
    </Section>
  )
}

const Section = styled.section`
  ${cardStyles}
  padding: 1rem 2rem 2.5rem;
  .title {
    h2 {
      color: #ffc107;
      letter-spacing: 0.2rem;
    }
  }
  .faqs {
    display: flex;
    flex-direction: column;
    /* justify-content: space-between; */
    gap: 1rem;
    margin-top: 1rem;
    .faq {
      display: flex;
      justify-content: space-between;
      cursor: pointer;
      transition: all 0.3s ease-in-out;
      :hover {
        color: #ffc107;
      }
      .info {
        display: flex;
        align-items: center;
        gap: 1rem;
        svg {
          font-size: 1.6rem;
        }
      }
      &:nth-of-type(2) {
        border-top: 1px solid #6c6e6e;
        border-bottom: 1px solid #6c6e6e;
        padding: 0.8rem 0;
      }
    }
  }
  @media screen and (min-width: 280px) and (max-width: 1080px) {
    .faq {
      align-items: center;
    }
  }
`
